<m-center>
    <m-card [autoHeight]="true" *ngIf="result$ | async as result">
        <div card-head>
            <div class="g-card-title">
                区域中心
            </div>
            <!-- <m-button-icon *ngIf="canCreateZone$ | async" icon="flaticon-add" (click)="create(result)">
                新建区域
            </m-button-icon> -->
            <div class="search">
                <div class="search-input">
                    <input type="text" class="form-control" placeholder="请输入区域名称" [ngModel]="searchKey" #keyword (keyup.enter)="onSearchKey(keyword.value, 0)" />
                </div>
                <div style=" margin-left:16px; ">
                    <button class="btn btn-sm btn-light m-btn m-btn--icon m-btn--icon-only m-btn--pill " (click)="onSearchKey(keyword.value, 0) ">
                        <i class="flaticon-search "></i>
                    </button>
                </div>
            </div>
        </div>

        <h6 class="nav " style="margin-top:-20px ">
            <span>
                <span (click)="step=1 ">区域中心 </span>
            <span (click)="step=2 " *ngIf="step>= 2">- 搜索'{{keyword.value}}' </span>
            <span (click)="step = 3" *ngIf="step >= 3">- {{searchTree[0]?.name}} </span>
            </span>
        </h6>

        <ng-container>
            <div class="roll" #roll>
                <!-- 默认进来的树状结构 -->
                <m-base-tree *ngIf="step == 1" [data]="tree" (roll)="srocllTop($event)">

                </m-base-tree>

                 <!-- 搜索出来的列表 -->
                <m-tree-list [data]="searchData" *ngIf="step == 2" (select)="selectItem($event)">

                </m-tree-list>

                <!-- 点击搜索出来列表点击后的树状-->
                <m-base-tree [expansion]="true" *ngIf="step == 3" [data]="searchTree" (roll)="srocllTop($event)">

                </m-base-tree>


                <!-- <m-tree [data]="result">
                    <ng-template let-zone>
                        <div class="zone-info">
                            <m-go-detail class="a" [g_id]="zone.id" [g_name]="zone.name">
                                {{ zone.name }}
                            </m-go-detail>
                            <div [style.opacity]="0">&nbsp;</div>
                            <span class="desc">{{ zone.des | ellipsis }}</span>
                            <div class="count">
                                <span>人员数：{{ zone.user_count }}人</span>
                                <span>终端数：{{ zone.pc_count }}台</span>
                                <span>软件数：{{ zone.software_count }}款</span>
                            </div>
                        </div>
                    </ng-template>
                </m-tree> -->
            </div>
            <ng-container *ngIf="step == 2">
                <m-pagination [length]="total" [pageSize]="20"></m-pagination>
            </ng-container>
        </ng-container>
    </m-card>
    <m-history [type]="'zone'" [length]="8"></m-history>
</m-center>